<template>
  <div class="element" @click="selectElement">
    <p :style="{ fontSize: `${props.fontSize}px`, color: props.color }">
      {{ props.content }}
    </p>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'

const props = defineComponent({
  props: {
    props: {
      type: Object,
      required: true,
      default: () => ({
        content: '',
        fontSize: 16,
        color: '#000000',
      }),
    },
  },
})

const emit = defineEmits(['update:props'])

// 选中当前元素
const selectElement = () => {
  // 这里可以实现选中元素的逻辑
  console.log('Selected element:', props)
}

// 更新属性
const updateProps = (newProps: any) => {
  emit('update:props', newProps)
}
</script>
